<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
    .group-rect-text{}
    .group-rect-text rect:hover{
      fill: #53dc91;
    }
  </style>
</head>
<body>
<!--<svg width="600px" height="400px" class="example">-->
  <!--<defs>-->
    <!--<marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth" >-->
      <!--<path d="M0,0 L0,6 L9,3 z" fill="#f00" />-->
    <!--</marker>-->
  <!--</defs>-->
  <!--<path d="M15,15V10H870.5V10z" stroke="#000" fill="none" stroke-width="2" marker-end="url(#arrow)"/>-->
<!--</svg>-->
<!--M0.5,0.5V0.5H870.5V0.5-->


<svg id="testsvg" width="960" height="500"></svg>
<script src="./plugins/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="./plugins/d3-v4/d3.v4.js" type="text/javascript"></script>
<script src="./plugins/sudoku-chart/sudoku-chart.js" type="text/javascript"></script>
<!--<script src="./plugins/echarts/echarts.js" type="text/javascript"></script>-->
<script type="text/javascript">
  //var svgdom = document.getElementById("testsvg");
  var chart = sudoku.init("#testsvg", {});
  chart.on('click', function (params) {
      alert(params);
  });
</script>
</body>
</html>